<script setup>
import Aside from './Aside.vue'
import HeaderBar from './HeaderBar.vue'
import { useLayoutStore } from '@/stores'

const layoutStore = useLayoutStore()
</script>

<template>
  <div class="min-h-screen">
    <Aside
      class="fixed left-0 top-0 z-10 -translate-x-full shadow transition-transform duration-300 sm:translate-x-0 sm:shadow-none"
      :class="layoutStore.isCollapse ? '' : 'translate-x-0 '"
    />
    <HeaderBar class="sticky left-0 top-0 z-50" />
    <main
      class="w-full transition-[padding] duration-300"
      :class="layoutStore.isCollapse ? 'sm:pl-16' : 'sm:pl-60'"
    >
      <div class="min-h-[calc(100vh-64px)] bg-info-light/80 p-2">
        <RouterView />
      </div>
    </main>
  </div>
</template>
